<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery元素操作</title>
    <link rel="stylesheet" href="../static/调试.svg" type="image/x-icon">
    <script src="../static/jquery-3.6.1.min.js"></script>
</head>
<body>
<!--定位元素、修改内部的html内容、设置与删除属性、设置css样式、创建并新增元素-->
    <div id="d1" class="c1">Hello, World!</div>
    <div id="d3" class="c1">Hello, Django!</div>
<script>
    //定位元素
    let divEle = $("div")
    console.log(divEle)

    let divEle1 = $("#d1")
    console.log(divEle1)

    let divEle2 = $(".c1")
    console.log(divEle2)

    //修改内部的html内容
    divEle1.html("测试用例1")

    //设置与删除属性
    divEle1.attr("id","d2")

    //设置css样式
    divEle1.css("color","green")
    divEle1.css("background","pink")

    //创建并新增元素
    let div = $("<div>测试用例2</div>")
    let d1Ele = $("#d2")
    d1Ele.append(div)

</script>
</body>
</html>